<template>
    <div class="visualizing-template">
        <div class="big-data-up">
            <div class="up-left"></div>
            <div class="up-center">
                <span>大屏可视化模板</span>
            </div>
            <div class="up-right">
                <div class="up-right-icon" @click="handleFullScreen" v-if="!isFullscreen"></div>
                <div class="up-right-icon-exit" @click="handleFullScreen" v-else></div>
            </div>
        </div>

        <div class="big-data-down">
            <div class="big-data-down-left">
                <div class="flex-warp-item">
                    <div class="flex-warp-item-box">
                        <flexTitle>词云</flexTitle>
                        <wordCloud></wordCloud>
                    </div>
                </div>
                <div class="flex-warp-item">
                    <div class="flex-warp-item-box">
                        <flexTitle>模块一</flexTitle>
                        <echartLine></echartLine>
                    </div>
                </div>
                <div class="flex-warp-item">
                    <div class="flex-warp-item-box">
                        <flexTitle>模块一</flexTitle>
                        <echarPie></echarPie>
                    </div>
                </div>
            </div>
            <div class="big-data-down-center">
                <div class="big-data-down-center-one">
                    <!-- <echartsMap></echartsMap> -->
                    <chinaMap></chinaMap>
                </div>
                <div class="big-data-down-center-two">
                    <div class="flex-warp-item-box">
                        <flexTitle>模块一</flexTitle>
                        <allLine></allLine>
                    </div>
                </div>
            </div>

            <!-- 右边 -->
            <div class="big-data-down-right">
                <div class="flex-warp-item">
                    <div class="flex-warp-item-box">
                        <flexTitle>模块一</flexTitle>
                        <echarBar></echarBar>
                    </div>
                </div>
                <div class="flex-warp-item">
                    <div class="flex-warp-item-box">
                        <flexTitle>模块一</flexTitle>
                        <highchartsPie></highchartsPie>
                    </div>
                </div>
                <div class="flex-warp-item">
                    <div class="flex-warp-item-box">
                        <flexTitle>模块一</flexTitle>
                        <histogramBar></histogramBar>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { onMounted, onUnmounted, reactive, toRefs } from "vue";
// import  login  from "@/api/common.js";
import screenfull from "screenfull";
import User from "@/api/modules/user.js";
import flexTitle from "@/components/title.vue";
import wordCloud from "@/components/word_cloud.vue";
import highchartsPie from "@/components/highcharts-pie.vue";
import echartLine from "@/components/line.vue";
import echarPie from "@/components/pie.vue";
import echartsMap from "@/components/map.vue";
import echarBar from "@/components/bar.vue";
import histogram from "@/components/histogram.vue";
import histogramBar from "@/components/histogramBar.vue";
import scrollData from "@/components/scrollData.vue";
import chinaMap from "@/components/chinaMap.vue";
import allLine from "@/components/allLine.vue";
import { ElMessage } from 'element-plus'
export default {
    name: "",
    components: {
        flexTitle,
        wordCloud,
        echartsMap,
        echartLine,
        echarPie,
        echarBar,
        highchartsPie,
        histogram,
        histogramBar,
        scrollData,
        chinaMap,
        allLine
    },
    setup() {
        const state = reactive({
            isFullscreen: false, //是否全屏
        });
        onMounted(() => {
            User.login({
                loginName: "admin",
                password: "4297F44B13955235245B2497399D7A93",
            }).then((res) => {
                console.log(res);
            });
            init()
        });
        onUnmounted(() => { });
        const handleFullScreen = () => {
            if (!screenfull.isEnabled) {
                ElMessage({
                    message: '该浏览器不支持全屏功能',
                    type: 'warning',
                })
                return false
            }
            screenfull.toggle();
        };
        const change = () => {
            state.isFullscreen = screenfull.isFullscreen
        };
        const init = () => {
            if (screenfull.isEnabled) {
                screenfull.on('change', change)
            }
        };
        const destroy = () => {
            if (screenfull.isEnabled) {
                screenfull.off('change', change)
            }
        }
        return {
            ...toRefs(state),
            handleFullScreen,
        };
    },
};
</script>

<style scoped lang="scss">
.visualizing-template {
    box-sizing: border-box;
    height: 100%;
    width: 100%;
    overflow: hidden;
    @include background("1-1");
    display: flex;
    flex-direction: column;
    font-size: 13px;

    .big-data-up {
        @include background("1-4");
        height: 74px;
        width: 100%;
        display: flex;
        align-items: center;
        color: #43bdf0;
        overflow: hidden;
        margin-bottom: 10px;

        .up-left {
            width: 30%;
            font-style: italic;
        }

        .up-center {
            width: 40%;
            display: flex;
            justify-content: center;
            letter-spacing: 5px;
            font-size: 32px;
            line-height: 74px;
            font-weight: 600;
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: -webkit-gradient(linear,
                    left bottom,
                    left top,
                    from(#1765ff),
                    color-stop(0, #1765ff),
                    color-stop(54%, #49d9fe),
                    color-stop(80%, #8fefff));
            background-image: linear-gradient(0deg,
                    #1765ff,
                    #1765ff 0,
                    #49d9fe 54%,
                    #8fefff 80%);

            span {
                cursor: pointer;
            }
        }

        .up-right {
            width: 30%;
            font-style: italic;
            position: relative;

            .up-right-icon {
                cursor: pointer;
                width: 30px;
                height: 30px;
                right: 20px;
                top: -31px;
                position: absolute;
                @include background("full-screen");
            }

            .up-right-icon-exit {
                cursor: pointer;
                width: 30px;
                height: 30px;
                right: 20px;
                top: -31px;
                position: absolute;
                @include background("exit");
            }
        }
    }

    .big-data-down {
        flex: 1;
        overflow: hidden;
        display: flex;

        .big-data-down-left,
        .big-data-down-right {
            width: 30%;
            display: flex;
            flex-direction: column;

            .flex-warp-item {
                padding: 0 7.5px 15px 15px;
                width: 100%;
                height: 33.33%;

                .flex-warp-item-box {
                    width: 100%;
                    height: 100%;
                    @include background("1-5");
                    display: flex;
                    flex-direction: column;

                    //   padding: 15px;
                    .flex-title {
                        margin-bottom: 15px;
                        color: #c0d1f2;
                        display: flex;
                        justify-content: space-between;

                        .flex-title-small {
                            font-size: 12px;
                        }
                    }

                    .flex-content {
                        flex: 1;
                        font-size: 12px;
                    }
                }
            }
        }

        .big-data-down-left {
            color: #c0d1f2;
        }

        .big-data-down-center {
            width: 40%;
            display: flex;
            flex-direction: column;

            .big-data-down-center-one {
                height: 66.67%;
                padding: 0 7.5px 15px;
            }

            .big-data-down-center-two {
                padding: 0 7.5px 15px;
                height: 33.33%;

                .flex-warp-item-box {
                    width: 100%;
                    height: 100%;
                    @include background("1-5");
                    display: flex;
                    flex-direction: column;

                    //   padding: 15px;
                    .flex-title {
                        margin-bottom: 15px;
                        color: #c0d1f2;
                        display: flex;
                        justify-content: space-between;

                        .flex-title-small {
                            font-size: 12px;
                        }
                    }
                }
            }
        }

        .big-data-down-right {
            .flex-warp-item {
                padding: 0 15px 15px 7.5px;
            }
        }
    }
}
</style>
